import React, { lazy, Suspense } from 'react'  // Babel 解析 jsx 语法会将标签转换为 React.createElement(...)。 此处引入 React 为解析后的代码提供依赖
import { NavLink, Routes, Route } from 'react-router-dom'
import { Button } from 'antd'
//import { Home, About } from './pages'

const Home = lazy(() => import(/*webpackChunkName: 'home'*/ './pages/Home'))
const About = lazy(() => import(/*webpackChunkName: 'about'*/ './pages/About'))

const App = () => (
    <>
        <h1>Welcome, This is React-Cli.</h1>
        <Button type='primary'>Button</Button>
        <ul>
            <li>
                <NavLink to={'/home'}>To Home</NavLink>
            </li>
            <li>
                <NavLink to={'/about'}>To About</NavLink>
            </li>
        </ul>

        <Suspense fallback={<div>Loading...</div>}>
            <Routes>
                <Route path='/home' element={<Home />} />
                <Route path='/about' element={<About />} />
            </Routes>
        </Suspense>
    </>

)

export default App